<template>
  <div class="change-field-input">
    <!-- Select 选择器 -->
    <el-select 
      v-if="props.fieldType === 'select'"
      :model-value="modelValue"
      @update:model-value="onChange"
      :placeholder="'请选择' + props.fieldName"
      clearable>
      <el-option
        v-for="item in props.options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    
    <!-- DatePicker 日期选择器 -->
    <el-date-picker
      v-else-if="props.fieldType === 'datePicker'"
      :model-value="modelValue"
      @update:model-value="onChange"
      type="date"
      placeholder="选择日期"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD HH:mm:ss"
      clearable
    />

    <el-date-picker
      v-else-if="props.fieldType === 'dateRangePicker'"
      :model-value="modelValue"
      @update:model-value="onChange"
      type="daterange"
      style="width: auto"
      start-placeholder="开始时间"
      end-placeholder="结束时间"
      format="YYYY-MM-DD"
      value-format="YYYY-MM-DD"
    />

    <el-input
       v-else-if="props.fieldType === 'textarea'"
      :model-value="modelValue"
      @update:model-value="onChange"
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 4 }"
      :placeholder="'请输入' + props.fieldName"
    />

    <!-- Radio 单选 -->
    <el-radio-group 
      v-else-if="props.fieldType === 'radioGroup'"  
      :model-value="modelValue"
      @update:model-value="onChange"
      :placeholder="'请选择' + props.fieldName"
      clearable>
      <el-radio
        v-for="(item, index) in props.options"
        :key="index"
        :label="item.value"
        >
        {{ item.label }}
      </el-radio>
    </el-radio-group>
    
    <!-- Input 输入框 -->
    <el-input 
      v-else
      :model-value="modelValue"
      @update:model-value="onChange"
      :placeholder="'请输入' + props.fieldName"
      :type="props.validator === 'number' ? 'number' : 'text'"
      clearable
    />
  </div>
</template>

<script setup>
const props = defineProps({
  modelValue: {
    type: [String, Number],
    default: ''
  },
  fieldType: {
    type: String,
    required: true
  },
  fieldName: {
    type: String,
    required: true
  },
  options: {
    type: Array,
    default: () => []
  },
  validator: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

const onChange = (value) => {
  emit('update:modelValue', value)
}
</script>